<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>服务端推送的两种方式</title>
  <style>
    li {
      line-height: 40px
    }
    span {
      color: red
    }
  </style>
</head>
<body>
  <h2>Comet</h2>
  <ul>
    <li>
      Comet指更高级的一种 Ajax 技术，是一种服务器向页面推送数据的技术。Comet 能够让信息实时的推送到页面上。实现 Comet 有两种方式，长轮询和流
    </li>
    <li>
      <h3>长轮询</h3>
      <ul>
        <li>
          1.页面发起一个到服务器的请求。然后服务器一直保持连接打开，直到有数据可发送。
        </li>
        <li>
          2.发送完数据之后，浏览器关闭连接，随即又发起一个服务器的新请求。这个过程在页面打开过程中持续不断，组成了长轮询
        </li>
      </ul>
    </li>
    <li>
      <h3>HTTP流</h3>
      <ul>
        <li>
          HTTP 流在页面的整个周期内只使用一个 HTTP 连接。具体来说，就是浏览器发送一个请求，而服务器保持连接打开，然后周期性的向浏览器发送数据
        </li>
      </ul>
    </li>
    <li><span>SSE</span> 是围绕只读 Comet 交互退出的模式。创建于服务器的单向连接。</li>
  </ul>

  <h2>Web Socket</h2>
  <ul>
    <li>Web Socekets是创建一个服务器与客户端的双向通信</li>
    <li>
      在 javascript中创建了一个 Web Scokets 之后，会有一个 HTTP 请求发送到浏览器端建立起连接。取得服务器响应之后，建立的连接会使用 HTTP 升级--从 HTTP协议交换为 Web Socket协议。<span>使用标准的 HTTP 服务器无法实现 Web Sockets ，只有支持这种协议的专门服务器才能正常工作</span>
    </li>
    <li>
      URL 模式也不同了: http(s):// --> ws(s)://
    </li>
    <li>Socket 传递的数据量较小，适用于移动端</li>
    <li>通过 new WebSocket 创建一个 socket 对象。参数为绝对路径。<span>同源策略对 WebScokets 不适用，因此可以通过他打开到任何站点的连接。至于能会与某个域中的页面进行通信，则完全取决于服务器</span></li>
    <li>
      实例化 WebScoket 之后，浏览器就会马上尝试创建连接。要关闭 Web Scoket 连接，可以在任何时候调用 close()方法。
    </li>
    <li>
      Web Scoket 打开之后，就可以通过连接发送和接受数据。要向服务器发送数据，使用 send()方法并传入任意字符串。只能发送纯文本数据。对于复杂的数据结构，在通过连接发送之前，必须进行序列化，通过 message 事件来接收数据，数据通过 event.data 获取。<span>返回的数据也是字符串。需要解析才能成为 Javascript 对象</span>
    </li>
  </ul>
  <h2>网络安全问题</h2>
  <ul>
    <li>
      可以通过 XHR 访问的任何 URL 也可以通过浏览器或者服务器来来访问，服务器必须知道请求者是否真的有权限访问要请求的数据<span>对于未被授权系统访问某个资源的情况，我们称之为 CSRF（跨站点请求伪造）</span>
    </li>
    <li>通常的做法是验证请求者是否有权限访问相应的资源。</li>
    <li>
      <ul>
        <li>要求以 SSL连接来访问 XHR 资源</li>
        <li>要求每一次请求都要附带经过响应算法计算的到的验证码</li>
        <li>cookie信息不能达到权限认证的效果。因为 cookie 很容易被伪造</li>
      </ul>
    </li>
  </ul>
  
</body>
</html>